<template>
  <Layout title="楼盘信息">
    <div class="information-navs">
      <ul>
        <li>
          <router-link :to="{ name: 'types', params: { type: 1 } }">配套图</router-link>
        </li>
        <li>
          <router-link :to="{ name: 'types', params: { type: 2 } }">效果图</router-link>
        </li>
        <li>
          <router-link :to="{ name: 'types', params: { type: 3 } }">交通图</router-link>
        </li>
        <li>
          <router-link :to="{ name: 'types', params: { type: 4 } }">户型图</router-link>
        </li>
      </ul>
    </div>
    <router-view></router-view>
  </Layout>
</template>
<script>
import Layout from "@/components/Layout";

export default {
  components: { Layout }
};
</script>

<style lang="stylus">
.information-navs ul {
  list-style: none;
  margin: 0;
  padding: 60px 0 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;

  li a {
    height: 138px;
    line-height 138px;
    font-size: 60px;
    text-decoration: none;
    color: #000;
    padding: 0 95px;
    position: relative;
    display: block;

    &.router-link-active {
      &:after {
        content: '';
        position: absolute;
        background: #045FE5;
        width: 100px;
        height: 12px;
        border-radius: 6px;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
      }
    }
  }
}
</style>